<template>
  <div class="news-detail-wrapper">
    <portal-header :current-index="currentIndex" />
    <div class="header-warp">
      <div class="w-content">
        <div class="header-warp-title fs-48 fw-700 d-flex flex-start">{{ categoryTitle }}</div>
        <div class="header-warp-desc d-flex flex-jc-sb fs-24">{{ categoryDesc }}</div>
      </div>
    </div>
    <div class="breadcrumb-wrapper">
      <div class="w-content d-flex flex-ai-c">
        <nav>
          <ol class="breadcrumb d-flex fs-16">
            <li class="breadcrumb-item c-999"><a href="#" @click.prevent="goToSys(0)">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ categoryTitle }}</li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="news-content w-content">
      <div class="news-title fs-36">{{ articleDetail.title }}</div>
      <div class="news-desc c-999 fs-14 d-flex flex-jc-sb">
        <div class="time">{{ articleDetail.publishedTime | formatTime }}</div>
        <div class="source">阅读数： {{ articleDetail.visitCount }}</div>
        <div v-if="articleDetail.author" class="declaration">[{{ articleDetail.author }}]</div>
      </div>
      <div class="news-html fs-16 " v-html="articleDetail.content" />
    </div>
    <portal-footer />
  </div>
</template>

<script>
import PortalHeader from './components/PortalHeader'
import PortalFooter from './components/PortalFooter'
import portalUtil from '@/utils/portal-util'
import { getArticle } from '@/api/rest/portal/portal'
import { formatDateTime } from '@/utils/formatdate'

export default {
  name: 'ArticleDetail',
  components: { PortalHeader, PortalFooter },
  filters: {
    formatTime(val) {
      if (val) {
        return formatDateTime(val)
      }
    }
  },
  props: {
    categoryDesc: {
      type: String,
      default: '关注，了解最新动态'
    }
  },
  data() {
    return {
      currentIndex: 0,
      articleDetail: {},
      categoryTitle: ''
    }
  },
  created() {
    this.currentIndex = this.$route.query.currentIndex
    this.categoryTitle = this.$route.query.categoryTitle
    this.getArticleDetail()
  },
  methods: {
    goToSys(index) {
      portalUtil.gotoPageIndex(this, index, {})
    },
    getArticleDetail() {
      getArticle(this.$route.query.id).then(res => {
        this.articleDetail = res.data
      })
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/portal/common.scss';
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.news-detail-wrapper {
  .header-warp {
    width: 100%;
    background-image: url('~@/assets/portal_images/news_detail_bg.png');
    background-size: 100% 100%;
    height: 250px;
    padding-top: 70px;

    .header-warp-title {
      height: 64px;
      line-height: 64px;
    }

    .header-warp-desc {
      margin-top: 16px;
      height: 31px;
      line-height: 31px;
    }
  }

  .news-content {
    .news-title {
      margin-top: 24px;
      color: #222222;
      height: 116px;
      line-height: 58px;
    }

    .news-desc {
      margin-top: 24px;

      .time {
        width: 143px;
      }

      .source {
        margin-right: 450px;
      }

      .declaration {
        float: right;
      }
    }

    .news-html {
      margin-top: 32px;
      border-top: 1px solid #E7E7E7;
      padding: 32px 0;
      line-height: 32px;
    }
  }
}

.breadcrumb-wrapper {
  height: 67px;
}

.breadcrumb-wrapper a:hover {
  color: #5f8abf;
}

.breadcrumb-wrapper .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  margin-right: 4px;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:hover {
  color: #1f425d;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  font-family: "Font Awesome 5 Pro";
  color: #D6D8D8;
  font-size: 14px;
}
</style>
